<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度搜索</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 500px;
            margin: 200px auto;
        }
        ul {
            width: 390px;
            padding: 5px;
            list-style: none;
            border: 1px solid red;
        }
        li:hover {
            background-color: red;
        }
        input {
            width:397px;
        }
        button {
            width: 70px;
        }
    </style>
</head>
<body>
<div class="box">
    <input type="text">
    <button>搜索</button>
    <!--<ul>-->
    <!--<li>aaaa</li>-->
    <!--<li>bbb</li>-->
    <!--<li>ccc</li>-->
    <!--</ul>-->
</div>
</body>
<script>
    var arr = ["a","ab","abc","abcd","aa","aaa"];
    var box = document.getElementsByTagName("div")[0];
    var inp = box.children[0];

    inp.onkeyup = function () {
        var newArr = [];
        for(var i =0;i<arr.length;i++){
            var val = this.value;
            if(arr[i].indexOf(val)===0){
                newArr.push("<li>"+arr[i]+"</li>")
            }
        }
        var str = newArr.join('');
        //Bug1.每次创建新的ul之前，先删除旧的ul
        //只有ul存在我们才能删除ul
//            var aaa = box.getElementsByTagName("ul")[0];
        if(box.children[2]){
            //只要存在，那么就是object，object类型的数据，只要不是null,对应的boolean值都是true；
            box.removeChild(box.children[2]);
        }

        if(this.value.length === 0 || newArr.length === 0){
            //切断函数(不在产生新的ul)
            return;
        }
        var ul = document.createElement('ul');
        ul.innerHTML = str;
        box.appendChild(ul);

    }
</script>
</html>